<template>
    <div>
        <p class="font-bold border-b pb-1 border-gray-400">{{ title }}</p>
        <div class="list-img">
            <div v-for="(item, index) in artistList" :key="index" :title="item.name">
                <div class="w-12">
                    <n-image :src="item.picUrl + '?param=48y48'" @click="getRouterToArtistInfo(item.id)"></n-image>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {NImage, useNotification} from 'naive-ui';
import {useRouter} from "vue-router";
export default {
    // 喜欢歌单或者专辑的人的列表
    name: "SimiArtist",
    props: {
        title: {
            type: String,
            default: '相似歌手'
        },
        // 喜欢的人列表
        artistList: {
            type: Array,
            default: () => []
        }
    },
    setup() {
        const TAG = "SimiArtist.vue";
        const router = useRouter();
        // 通知组件
        const notification = useNotification();
        // 跳转到歌手详情页面
        const getRouterToArtistInfo = (id) => {
            if (id === 0) {
                notification['error']({
                    content: '获取到的用户id错误',
                    meta: '切勿重复点击'
                })
            } else {
                router.push({path: '/artist', query: {id}});
            }
        }
        return {
            getRouterToArtistInfo,
        }
    },
    components: {
        NImage
    }
}
</script>

<style scoped lang="scss">
.list-img {
    @apply grid grid-cols-4 gap-2 mt-4 ;
}
</style>